<template>
  <div class="equipment-safety">
    <el-row :gutter="10" class="card-heard">
      <el-col :span="8">
        <div class="row-content">
          <span class="content-label">平均设备倾角</span>
          <span class="content-value">1.9%</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="row-content">
          <span class="content-label">平均设备振幅</span>
          <span class="content-value">1.2mm</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="row-content">
          <span class="content-label">设备稳定性</span>
          <span class="content-value">61.0%</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="chart-row">
      <el-col :span="12">
        <div class="chart-col">
          <span class="chart-title">设备倾角变化</span>
          <div ref="violationTrendChart" class="chart-container"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-col">
          <span class="chart-title">设备振幅变化</span>
          <div ref="staffChangeChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="chart-row">
      <el-col :span="12">
        <div class="chart-col">
          <span class="chart-title">设备稳定性评估</span>
          <div ref="helmetChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "equipmentSafety",
  data() {
    return {
      violationTrendChart: null,
      staffChangeChart: null,
      helmetChart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initViolationTrendChart();
      this.initStaffChangeChart();
      this.initHelmetChart();

      window.addEventListener('resize', this.handleChartResize);
    });
  },
  beforeDestroy() {
    this.destroyChart(this.violationTrendChart);
    this.destroyChart(this.staffChangeChart);
    this.destroyChart(this.helmetChart);

    window.removeEventListener('resize', this.handleChartResize);
  },
  methods: {
    destroyChart(chart) {
      if (chart && !chart.isDisposed()) {
        chart.dispose();
      }
    },

    handleChartResize() {
      this.violationTrendChart?.resize();
      this.staffChangeChart?.resize();
      this.helmetChart?.resize();
    },

    initViolationTrendChart() {
      const chartDom = this.$refs.violationTrendChart;
      this.violationTrendChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 11, 61, 0.9)',
          borderColor: 'rgba(255, 255, 255, 0.2)',
          borderWidth: 1,
          textStyle: { color: '#fff' },
          padding: 10,
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          formatter: function(params) {
            let res = `<div>${params[0].name}</div>`;
            params.forEach(item => {
              res += `<div>${item.seriesName}: ${item.value}${item.seriesName.includes('倾角') ? '°' : ''}</div>`;
            });
            return res;
          }
        },
        grid: { left: '5%', right: '5%', bottom: '15%', top: '20%' },
        legend: {
          data: ['设备倾角(°)'],
          textStyle: { color: '#fff' }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 3.5,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: {
            color: '#fff',
          },
          splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
        },
        series: [
          {
            name: '设备倾角(°)',
            type: 'line',
            data: [1.4, 0.5, 2.7, 2.2, 3.3, 2.9, 1.0, 1.9, 2.5, 1.6, 3.5, 2.5, 1.8, 3.5, 2.0, 1.3, 1.7, 1.9, 2.0, 3.0, 2.5, 1.1, 2.8, 2.6],
            smooth: true, // 折线平滑
            lineStyle: { width: 3, color: '#52c41a' },
            itemStyle: { color: '#52c41a', borderColor: '#52c41a', borderWidth: 2 },
          }
        ]
      };

      this.violationTrendChart.setOption(option);
    },

    initStaffChangeChart() {
      const chartDom = this.$refs.staffChangeChart;
      this.staffChangeChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 11, 61, 0.9)',
          borderColor: 'rgba(255, 255, 255, 0.2)',
          borderWidth: 1,
          textStyle: { color: '#fff' },
          padding: 10,
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          formatter: function(params) {
            let res = `<div>${params[0].name}</div>`;
            params.forEach(item => {
              res += `<div>${item.seriesName}: ${item.value}${item.seriesName.includes('振幅') ? 'mm' : ''}</div>`;
            });
            return res;
          }
        },
        grid: { left: '5%', right: '5%', bottom: '15%', top: '20%' },
        legend: { data: ['设备振幅(mm)'], textStyle: { color: '#fff' } },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 2.5,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
        },
        series: [{
          name: '设备振幅(mm)',
          type: 'line',
          data: [1.0, 0.1, 0.6, 1.2, 2.3, 1.0, 1.9, 1.4, 1.5, 0.3, 0.4, 0.5, 0.1, 1.2, 1.4, 1.9, 2.4, 0.6, 2.0, 1.0, 1.3, 1.8, 1.5, 0.3],
          smooth: true,
          lineStyle: { width: 3, color: '#13c2c2' },
          itemStyle: { color: '#13c2c2', borderColor: '#13c2c2', borderWidth: 2 },
        }]
      };

      this.staffChangeChart.setOption(option);
    },

    initHelmetChart() {
      const chartDom = this.$refs.helmetChart;
      this.helmetChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 11, 61, 0.9)',
          borderColor: 'rgba(255, 255, 255, 0.2)',
          borderWidth: 1,
          textStyle: { color: '#fff' },
          padding: 10,
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          formatter: function(params) {
            let res = `<div>${params[0].name}</div>`;
            params.forEach(item => {
              res += `<div>${item.seriesName}: ${item.value}${item.seriesName.includes('评估') ? '%' : ''}</div>`;
            });
            return res;
          }
        },
        grid: { left: '5%', right: '5%', bottom: '15%', top: '20%' },
        legend: { data: ['设备稳定性评估(%)'], textStyle: { color: '#fff' } },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
        },
        series: [{
          name: '设备稳定性评估(%)',
          type: 'line',
          data: [70, 91, 60, 58, 56, 54, 40, 65, 50, 80, 68, 72, 29, 70, 63, 49, 48, 90, 65, 60, 55, 70, 66, 68],
          smooth: true,
          lineStyle: { width: 3, color: '#722ed1' },
          itemStyle: { color: '#722ed1', borderColor: '#722ed1', borderWidth: 2 },
        }]
      };

      this.helmetChart.setOption(option);
    },
  }
};
</script>

<style lang="scss" scoped>
.equipment-safety {
  padding: 10px;
}

.card-heard {
  margin-bottom: 15px;

  .row-content {
    height: px2vh(78);
    background: #52c41a;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .content-value {
      font-family: Nunito Sans, Nunito Sans;
      font-weight: 700;
      font-size: px2font(20);
      color: #FFFFFF;
      line-height: px2vh(32);
      text-align: center;
    }

    .content-label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: px2font(14);
      color: #FFFFFF;
      line-height: px2vh(22);
      text-align: center;
    }
  }
}

.chart-row {
  margin-bottom: 15px;

  .chart-col {
    background: rgba(0,11,61);
  }

  .chart-title {
    display: inline-block;
    font-family: PingFang SC, PingFang SC;
    font-size: px2font(14);
    font-weight: 600;
    color: #fff;
    margin: 10px;
  }

  .chart-container {
    width: 100%;
    height: 260px;
    border-radius: 8px;
    overflow: hidden;
  }
}
</style>
